<template>
	<view class="container">
		<view class="search-wrapper">
			<view class="search-input">
				<view class="search-input-wrapper">
					<view class="left">
						<u-icon color="#b4b4b4" size="24" name="search"></u-icon>
					</view>
					<view class="right">
						<input v-model="searchValue" class="input" focus="true" placeholder="请输入您搜索的商品" type="text" />
					</view>
				</view>
			</view>
			<view class="search-button">

				<view class="button" @click="onSearch"><u-icon color="#FFFFFF" size="28" name="search"></u-icon></view>
			</view>
		</view>
		<view class="history" v-if="historySearch.length">
			<view class="his-head">
				<text class="title">历史搜索</text>

				<u-icon class="icon" color="#b4b4b4" size="24" @click="clearSearch" name="close-circle-fill"></u-icon>

			</view>
			<view class="his-list">
				<view class="his-item" v-for="(val, index) in historySearch" :key="index">
					<view class="history-button" @click="handleQuick(val)">{{ val }}</view>
				</view>
			</view>
		</view>
		<!-- </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historySearch: [],
				searchValue: ''
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 获取历史搜索
			this.historySearch = this.getHistorySearch()
		},

		methods: {

			/**
			 * 获取历史搜索
			 */
			getHistorySearch() {
				return uni.getStorageSync('HISTORY_SEARCH') || []
			},

			/**
			 * 搜索提交
			 */
			onSearch() {
				const {
					searchValue
				} = this
				if (searchValue) {
					// 记录历史搜索
					this.setHistory(searchValue)
					// 跳转到商品列表页
					uni.navigateTo({
						url: '/pages/goods/list?search=' + searchValue
					})
				}
			},

			/**
			 * 记录历史搜索
			 */
			setHistory(searchValue) {
				const data = this.getHistorySearch()
				const index = data.indexOf(searchValue)
				index > -1 && data.splice(index, 1)
				data.unshift(searchValue)
				this.historySearch = data
				this.onUpdateStorage()
			},

			/**
			 * 清空最近搜索记录
			 */
			clearSearch() {
				this.historySearch = []
				this.onUpdateStorage()
			},

			/**
			 * 更新历史搜索缓存
			 * @param {Object} data
			 */
			onUpdateStorage(data) {
				uni.setStorageSync('HISTORY_SEARCH', this.historySearch)
			},

			/**
			 * 跳转到最近搜索
			 */
			handleQuick(search) {
				uni.navigateTo({
					url: '/pages/goods/list?search=' + search
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}

	.search-wrapper {
		display: flex;
		height: 70rpx;
	}

	// 搜索输入框
	.search-input {
		width: 80%;
		background: #fff;
		border-radius: 10rpx 0 0 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		border: 1rpx solid #fa2209;

		.search-input-wrapper {
			display: flex;

			.left {
				display: flex;
				width: 66rpx;
				justify-content: center;
				align-items: center;



			}

			.right {
				flex: 1;

				input {
					font-size: 28rpx;
					height: 70rpx;
					display: flex;
					align-items: center;

					.input-placeholder {
						color: #aba9a9;
					}
				}

			}
		}
	}

	// 搜索按钮
	.search-button {
		width: 20%;
		box-sizing: border-box;

		.button {
			height: 70rpx;
			border-radius: 0 10rpx 10rpx 0;
			background: #fa2209;
			color: $main-text;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


	// 最近搜索
	.history {

		.his-head {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			padding: 50rpx 0 0 0;
			color: #777;

			 

		}

		.his-list {
			padding: 20rpx 0;
			overflow: hidden;

			.his-item {
				width: 33.3%;
				float: left;
				padding: 10rpx;
				box-sizing: border-box;

				.history-button {
					text-align: center;
					padding: 14rpx;
					line-height: 30rpx;
					border-radius: 100rpx;
					background: #fff;
					font-size: 26rpx;
					border: 1rpx solid #efefef;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

			}

		}
	}
</style>